<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@page isELIgnored="false" %>
<html>
<head>
    <title>我的订单</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <!--css文件-->
    <jsp:include page="common/common-css.jsp" />
</head>
<body>

<jsp:include page="common/common-mobileButton.jsp" />

<div class="main-wrapper">
    <!--页面导航栏组件-->
    <jsp:include page="common/common-header.jsp" />

    <div align="center">
        <h3 class="breadcrumb-heading">我的订单</h3>
    </div>

    <main class="main-content">
        <c:choose>
            <c:when test="${!empty orders}">
                <div class="wishlist-area section-space-y-axis-100">
                    <div class="container">
                        <div class="row">
                            <div class="col-12">
                                <div class="table-responsive">

                                    <table class="table table-hover" style="text-align: center"
                                           aria-describedby="myOrderTable">
                                        <tr>
                                            <th style="text-align: center">商品详情</th>
                                            <th style="text-align: center">总价</th>
                                            <th style="text-align: center">收货信息</th>
                                            <th style="text-align: center">订单状态</th>
                                            <th style="text-align: center">支付方式</th>
                                            <th style="text-align: center">时间</th>
                                            <th style="text-align: center">提示</th>
                                            <th style="text-align: center">操作</th>
                                        </tr>

                                        <c:forEach items="${orders}" var="order">
                                            <tr>
                                                <td>
                                                    <c:forEach items="${order.itemList}" var="item">
                                                        <p>${item.book.name }(${item.price }) x ${item.amount}</p>
                                                    </c:forEach>
                                                </td>
                                                <td><p>${order.total} 元</p></td>
                                                <td>
                                                    <p>${order.realName}</p>
                                                    <p>${order.phone}</p>
                                                    <p>${order.address}</p>
                                                </td>
                                                <td>
                                                    <p>
                                                        <c:if test="${order.status==2}"><span style="color:red;">已付款</span></c:if>
                                                        <c:if test="${order.status==3}"><span style="color:green;">已发货</span></c:if>
                                                        <c:if test="${order.status==4}"><span style="color:black;">已完成</span></c:if>
                                                        <c:if test="${order.status==5}"><span style="color:red;">未付款</span></c:if>
                                                    </p>
                                                </td>
                                                <td>
                                                    <p>
                                                        <c:if test="${order.paytype==null}">无</c:if>
                                                        <c:if test="${order.paytype==1}">支付宝</c:if>
                                                        <c:if test="${order.paytype==2}">货到付款</c:if>
                                                    </p>
                                                </td>
                                                <td>
                                                    <p>
                                                        <fmt:formatDate value="${order.createTime}" pattern="yyyy-MM-dd HH:mm:ss" />
                                                    </p>
                                                </td>

                                                <c:choose>
                                                    <c:when test="${order.status==5}">
                                                        <td>
                                                            <div class="alert alert-warning" role="alert">
                                                                请完成支付或取消
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                    <c:when test="${order.status==2}">
                                                        <td>
                                                            <div class="alert alert-success" role="alert">
                                                                请耐心等待商家发货~
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                    <c:when test="${order.status==3}">
                                                        <td>
                                                            <div class="alert alert-success" role="alert">
                                                                包裹正在运输中...
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                    <c:when test="${order.status==4}">
                                                        <td>
                                                            <div class="alert alert-success" role="alert">
                                                                您已确认收货~
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                    <c:when test="${order.status==6}">
                                                        <td>
                                                            <div class="alert alert-warning" role="alert">
                                                                您已申请退款~
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                    <c:when test="${order.status==7}">
                                                        <td>
                                                            <div class="alert alert-success" role="alert">
                                                                商家已同意退款，请注意查收
                                                            </div>
                                                        </td>
                                                    </c:when>
                                                </c:choose>

                                                <td>
                                                    <c:choose>
                                                        <c:when test="${order.status==5}">

                                                            <a class="btn btn-success" href="/bookmall/order/confirm/${order.id}"><span
                                                                    class="mdi mdi-credit-card"></span>付款</a>
                                                            <button type="button" class="btn btn-danger"
                                                                    onclick="cancelOrder('${order.id}')">
                                                                <span class="mdi mdi-window-close"></span>取消
                                                            </button>
                                                        </c:when>

                                                        <c:when test="${order.status==2 || order.status==3}">
                                                            <button type="button" class="btn btn-primary"
                                                                    onclick="confirmOrder('${order.id}')">
                                                                <span class="mdi mdi-credit-card"></span>确认收货
                                                            </button>
                                                        </c:when>

                                                        <c:when test="${order.status==4 || order.status==7}">
                                                            <button type="button" class="btn btn-danger"
                                                                    onclick="removeOrder('${order.id}')">
                                                                <span class="mdi mdi-window-close"></span>删除订单
                                                            </button>
                                                        </c:when>
                                                    </c:choose>
                                                </td>
                                            </tr>
                                        </c:forEach>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </c:when>
            <c:otherwise>
                <div style='text-align:center; color: #33cabb;'>
                    <p style="font-size: 1.5em">您的订单信息空空如也...</p>
                </div>
            </c:otherwise>
        </c:choose>


    </main>
    <!--页尾-->
    <jsp:include page="footer.jsp" />
</div>
<!--js文件-->
<jsp:include page="common/common-js.jsp" />
<script>

    /*取消订单*/
    function cancelOrder(orderId) {
        layer.open({
            content: '确 定 要 取 消 该 订 单 吗？',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                $.get('/bookmall/order/cancel/' + orderId, function (res) {
                    if (res) {
                        layer.msg("订单取消成功~", {icon: 1}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg("订单取消失败！请确认信息是否完整或联系管理员!", {icon: 2}, function () {
                            location.reload();
                        });
                    }
                });
            },
            btn2: function (index, layero) {
                layer.msg("已取消操作...", {icon: 2});
            },
            cancel: function () {
            }
        });
    }

    /**
     * 确认收货
     * @param orderId
     */
    function confirmOrder(id) {
        layer.open({
            content: '是 否 要 签 收 该 订 单 ？',
            btn: ['是', '否'],
            yes: function (index, layero) {
                $.post("/bookmall/order/receipt/" + id, function (res) {
                    if (res) {
                        layer.msg("签收成功~欢迎下次光临...", {icon: 1}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg("签收失败!请确认当前信息是否完整或联系管理员", {icon: 2}, function () {
                            location.reload();
                        });
                    }
                });
            },
            btn2: function (index, layero) {
                layer.msg("已取消操作...", {icon: 2});
            },
            cancel: function () {
            }
        });
    }


    /*删除订单*/
    function removeOrder(orderId) {
        layer.open({
            content: '确 定 要 删 除 该 订 单 吗？',
            btn: ['确定', '取消'],
            yes: function (index, layero) {
                $.get('/bookmall/order/remove/' + orderId, function (res) {
                    if (res) {
                        layer.msg("订单删除成功~", {icon: 1}, function () {
                            location.reload();
                        });
                    } else {
                        layer.msg("订单删除失败！请确认信息是否完整或联系管理员!", {icon: 2}, function () {
                            location.reload();
                        });
                    }
                });
            },
            btn2: function (index, layero) {
                layer.msg("已取消操作...", {icon: 2});
            },
            cancel: function () {
            }
        });
    }
</script>
</body>
</html>
